<!-- 续费功能的日期选择还有问题,初始日期无法屏蔽 -->
<template>
  <div class="contain">
    <div class="header">
      <el-page-header content="月卡详情" @back="$router.back()" />
      <div style="font-size:18px">黑马管理员</div>
    </div>
    <div class="main">
      <div class="carInfo">
        <el-card class="boxCard">
          <div class="carHeader">
            <span>车辆信息</span>
          </div>
          <div class="carMain">
            <el-form ref="carInfoForm" :label-position="labelPosition" label-width="80px" :model="carInfoForm">
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-form-item label="车主姓名">
                    <el-input v-model="carInfoForm.personName" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系方式">
                    <el-input v-model="carInfoForm.phoneNumber" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-form-item label="车牌号码">
                    <el-input v-model="carInfoForm.carNumber" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆品牌">
                    <el-input v-model="carInfoForm.carBrand" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </div>
        </el-card>
      </div>
      <div class="feeInfo">
        <el-card class="boxCard">
          <div class="feeHeader">
            <span>月卡缴费记录</span>
          </div>
          <div class="feeRecord">
            <el-table :data="rechargeList">
              <el-table-column label="序号" type="index" />
              <el-table-column label="有效时间">
                <template #default="{ row }">
                  {{ row.cardStartDate }} 至 {{ row.cardEndDate }}
                </template>
              </el-table-column>
              <el-table-column prop="paymentAmount" label="支付金额" />
              <el-table-column prop="paymentMethod" :formatter="format" label="支付方式" />
              <el-table-column prop="createTime" label="办理时间" />
              <el-table-column prop="createUser" label="办理人" />
            </el-table>
          </div>
        </el-card>
      </div>
    </div>

  </div>

</template>

<script>
import { getCardDetailAPI } from '@/apis/carCard'
export default {
  data() {
    return {
      labelPosition: 'left',
      carInfoForm: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: ''
      },
      rechargeList: []
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  created() {
    this.getCardDetail()
  },
  methods: {
    // 月卡缴费详情格式
    format(row) {
      const MAP = {
        'Cash': '现金',
        'WeChat': '微信',
        'Alipay': '支付宝'
      }
      return MAP[row.paymentMethod]
    },
    // 获取月卡详情
    async getCardDetail() {
      const res = await getCardDetailAPI(this.id)
      console.log(res)
      const { personName, phoneNumber, carNumber, carBrand } = res.data
      this.carInfoForm = { personName, phoneNumber, carNumber, carBrand }
      this.rechargeList = res.data.rechargeList
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  min-height: 100vh;
  background-color: #f4f6f8;

  .header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    height: 50px;
    align-items: center;

    ::v-deep .el-page-header__title {
      font-size: 18px !important;
      font-weight: 300 !important;
    }
  }

  .main {
    padding: 0 300px;

    .carInfo {
      margin: 20px auto;
    }
  }
}
</style>
